{% extends "projects/project_edit_base.html" %}

{% load i18n %}
{% load static %}

{% block title %}{% trans "Search Analytics" %}{% endblock %}

{% block nav-dashboard %} class="active"{% endblock %}

{% block project-search-analytics-active %}active{% endblock %}
{% block project_edit_content_header %}{% trans "Search Analytics" %}{% endblock %}

{% block project_edit_content %}

  {% if not enabled %}
    {% block disabled %}
      {% include 'projects/includes/feature_disabled.html' with project=project %}
    {% endblock %}
  {% endif %}

  <h3>{% trans "Top queries in the past 30 days" %}</h3>
  <div class="module-list">
    <div class="module-list-wrapper">
      <ul class="long-list-overflow">
        {% for query, count, total_results in queries %}
          <li class="module-item">
            {{ query }}
            ({{ total_results }} result{{ total_results|pluralize:"s" }})
            <span class="right quiet">
              {{ count }} search{{ count|pluralize:"es" }}
            </span>
          </li>
        {% empty %}
          <li class="module-item">
            <p class="quiet">
              {% trans 'No data available.' %}
            </p>
          </li>
        {% endfor %}
      </ul>
    </div>
  </div>

  <br/>
  {% if query_count_of_1_month.labels and query_count_of_1_month.int_data %}
    <h2>{% trans "Daily search totals" %}</h2>
    <canvas id="analytics-chart-last-7-days" width="400" height="150"></canvas>
  {% endif %}

  <br />
  <form method="get">
    <button type="submit" name="download" value="true" {% if not enabled %}disabled{% endif %}>{% trans "Download all data" %}</button>
  </form>

{% endblock %}

{% block extra_scripts %}
  <!-- Chart.js v2.8.0 -->
  <script src="{% static 'vendor/chartjs/chartjs.bundle.min.js' %}"></script>
{% endblock %}

{% block extra_links %}
  <!-- Chart.js v2.8.0 -->
  <link rel="stylesheet" href="{% static 'vendor/chartjs/chartjs.min.css' %}">
{% endblock %}

{% block footerjs %}
  {% if query_count_of_1_month.labels and query_count_of_1_month.int_data %}
  <script>
    // Line chart
    var line_chart = document.getElementById("analytics-chart-last-7-days").getContext("2d");
    var line_chart_labels = {{ query_count_of_1_month.labels|safe }};
    var line_chart_data = {{ query_count_of_1_month.int_data|safe }};

    var line_chart = new Chart(line_chart, {
      type: "line",
      data: {
        labels: line_chart_labels,
        datasets: [{
          label: "# of searches",
          data: line_chart_data,
          backgroundColor: "rgba(75,192,192,0.4)",
          borderColor: "rgba(75, 192, 192, 1)",
          pointBorderColor: "rgba(75, 192, 192, 1)",
        }]
      }
    });
  </script>
  {% endif %}
{% endblock %}
